<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入样式 -->
<!--    <link rel="stylesheet" href="../elementUI.css">-->
        <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="../base.css">
</head>
<body>
<div id="app">
    <el-row>
        <el-col :span="12">
            <div id="sex" style="width: 100%;height:400px;"></div>
        </el-col>
        <el-col :span="12">
            <div id="age" style="width: 100%;height:400px;"></div>
        </el-col>
    </el-row>

    <el-row style="margin-top: 50px;">
        <el-col :span="12">
            <div id="registerType" style="width: 100%;height:400px;"></div>
        </el-col>
        <el-col :span="12">
            <div id="login" style="width: 100%;height:400px;"></div>
        </el-col>
    </el-row>

</div>


</body>
<script src="../echarts.min.js"></script>
<!-- 先引入 Vue -->
<script src="../vue.js"></script>
<!-- 引入组件库 -->
<script src="../elementUI.js"></script>
<!-- vue ajax插件 -->
<script src="../axios.min.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {},
        created: function () {
            var that = this;
            axios.defaults.withCredentials = true;
            //查询性别
            axios.get('http://39.105.59.232/manage/summary/sex')
                .then(function (response) {
                    if (response.data.code == 200) {
                        var sexList = response.data.data;
                        var op = [];
                        for (var sex of sexList) {
                            var o = {
                                value: sex.count,
                                name: sex.sex
                            }
                            op.push(o);
                        }
                        // 基于准备好的dom，初始化echarts实例
                        var sexChart = echarts.init(document.getElementById('sex'));
                        // 指定图表的配置项和数据
                        option = {
                            title: {
                                text: '性别分布',
                                left: 'center',
                                top: 20,
                                textStyle: {
                                    color: '#ccc'
                                }
                            },
                            tooltip: {
                                trigger: 'item',
                                formatter: "{a} <br/>{b} : {c} ({d}%)"
                            },
                            series: [
                                {
                                    name: '性别',
                                    type: 'pie',
                                    radius: '55%',
                                    center: ['50%', '50%'],
                                    data: op.sort(function (a, b) {
                                        return a.value - b.value;
                                    }),
                                    roseType: 'radius',
                                    label: {
                                        normal: {
                                            textStyle: {
                                                color: 'rgba(255, 255, 255, 0.3)'
                                            }
                                        }
                                    },
                                    labelLine: {
                                        normal: {
                                            lineStyle: {
                                                color: 'rgba(255, 255, 255, 0.3)'
                                            },
                                            smooth: 0.2,
                                            length: 10,
                                            length2: 20
                                        }
                                    },
                                    itemStyle: {
                                        normal: {
                                            color: '#c23531',
                                            shadowBlur: 200,
                                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                                        }
                                    },

                                    animationType: 'scale',
                                    animationEasing: 'elasticOut',
                                    animationDelay: function (idx) {
                                        return Math.random() * 200;
                                    }
                                }
                            ]
                        };
                        // 使用刚指定的配置项和数据显示图表。
                        sexChart.setOption(option);
                    } else {
                        that.$alert("获取性别汇总失败", "提示");
                    }
                })
            //查询年龄
            axios.get('http://39.105.59.232/manage/summary/age')
                .then(function (response) {
                    if (response.data.code == 200) {
                        var ageList = response.data.data;
                        var op = [];
                        for (var age of ageList) {
                            var o = {
                                value: age.count,
                                name: age.age
                            }
                            op.push(o);
                        }
                        // 基于准备好的dom，初始化echarts实例
                        var ageChart = echarts.init(document.getElementById('age'));
                        // 指定图表的配置项和数据
                        option = {
                            title: {
                                text: '年龄分布',
                                left: 'center',
                                top: 20,
                                textStyle: {
                                    color: '#ccc'
                                }
                            },
                            tooltip: {
                                trigger: 'item',
                                formatter: "{a} <br/>{b} : {c} ({d}%)"
                            },
                            series: [
                                {
                                    name: '年龄区间',
                                    type: 'pie',
                                    radius: '55%',
                                    center: ['50%', '50%'],
                                    data: op.sort(function (a, b) {
                                        return a.value - b.value;
                                    }),
                                    roseType: 'radius',
                                    label: {
                                        normal: {
                                            textStyle: {
                                                color: 'rgba(255, 255, 255, 0.3)'
                                            }
                                        }
                                    },
                                    labelLine: {
                                        normal: {
                                            lineStyle: {
                                                color: 'rgba(255, 255, 255, 0.3)'
                                            },
                                            smooth: 0.2,
                                            length: 10,
                                            length2: 20
                                        }
                                    },
                                    itemStyle: {
                                        normal: {
                                            color: '#c23531',
                                            shadowBlur: 200,
                                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                                        }
                                    },

                                    animationType: 'scale',
                                    animationEasing: 'elasticOut',
                                    animationDelay: function (idx) {
                                        return Math.random() * 200;
                                    }
                                }
                            ]
                        };
                        // 使用刚指定的配置项和数据显示图表。
                        ageChart.setOption(option);
                    } else {
                        that.$alert("获取年龄汇总失败", "提示");
                    }
                })

            //查询注册来源
            axios.get('http://39.105.59.232/manage/summary/source')
                .then(function (response) {
                    if (response.data.code == 200) {
                        var sourceList = response.data.data;
                        var op1 = [];
                        var op2 = [];
                        var max = 0;
                        for (var source of sourceList) {
                            op1.push(source.source);
                            op2.push(source.count);
                            if (source.count > max) {
                                max = source.count;
                            }
                        }
                        var registerTypeChart = echarts.init(document.getElementById('registerType'));
                        var dataAxis = op1;
                        var data = op2;
                        var yMax = max;
                        var dataShadow = [];

                        for (var i = 0; i < data.length; i++) {
                            dataShadow.push(yMax);
                        }

                        option = {
                            title: {
                                text: '注册渠道'
                            },
                            xAxis: {
                                data: dataAxis,
                                axisLabel: {
                                    inside: true,
                                    textStyle: {
                                        color: '#fff'
                                    }
                                },
                                axisTick: {
                                    show: false
                                },
                                axisLine: {
                                    show: false
                                },
                                z: 10
                            },
                            yAxis: {
                                axisLine: {
                                    show: false
                                },
                                axisTick: {
                                    show: false
                                },
                                axisLabel: {
                                    textStyle: {
                                        color: '#999'
                                    }
                                }
                            },
                            dataZoom: [
                                {
                                    type: 'inside'
                                }
                            ],
                            series: [
                                { // For shadow
                                    type: 'bar',
                                    itemStyle: {
                                        normal: {color: 'rgba(0,0,0,0.05)'}
                                    },
                                    barGap: '-100%',
                                    barCategoryGap: '40%',
                                    data: dataShadow,
                                    animation: false
                                },
                                {
                                    type: 'bar',
                                    itemStyle: {
                                        normal: {
                                            color: new echarts.graphic.LinearGradient(
                                                0, 0, 0, 1,
                                                [
                                                    {offset: 0, color: '#83bff6'},
                                                    {offset: 0.5, color: '#188df0'},
                                                    {offset: 1, color: '#188df0'}
                                                ]
                                            )
                                        },
                                        emphasis: {
                                            color: new echarts.graphic.LinearGradient(
                                                0, 0, 0, 1,
                                                [
                                                    {offset: 0, color: '#2378f7'},
                                                    {offset: 0.7, color: '#2378f7'},
                                                    {offset: 1, color: '#83bff6'}
                                                ]
                                            )
                                        }
                                    },
                                    data: data
                                }
                            ]
                        };

                        // Enable data zoom when user click bar.
                        var zoomSize = 6;
                        registerTypeChart.on('click', function (params) {
                            console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
                            myChart.dispatchAction({
                                type: 'dataZoom',
                                startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
                                endValue: dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)]
                            });
                        });
                        registerTypeChart.setOption(option);
                    } else {
                        that.$alert("获取年龄汇总失败", "提示");
                    }
                })

            //查询七日登录
            axios.get('http://39.105.59.232/manage/summary/login')
                .then(function (response) {
                    if (response.data.code == 200) {
                        var loginList = response.data.data;
                        var op1 = [];
                        var op2 = [];
                        for (var login of loginList) {
                            var s = login.loginDate.slice(8, 10);
                            op1.push(s);
                            op2.push(login.count);
                        }
                        // 基于准备好的dom，初始化echarts实例
                        var loginChart = echarts.init(document.getElementById('login'));
                        option = {
                            title: {
                                text: '七日登录'
                            },
                            xAxis: {
                                type: 'category',
                                data: op1
                            },
                            yAxis: {
                                type: 'value'
                            },
                            series: [{
                                data: op2,
                                type: 'line'
                            }]
                        };
                        // 使用刚指定的配置项和数据显示图表。
                        loginChart.setOption(option);
                    } else {
                        that.$alert("获取年龄汇总失败", "提示");
                    }
                })
        }
    })


</script>
</html>